import React, { useState } from "react";

const App = () => {
  // 数字类型
  const [count, setCount] = useState(0);

  // 字符串
  const [msg, setMsg] = useState('Hello');

  // 对象数组
  const [books, setBooks] = useState([{id: 1, name: 'React'}, {id: 2, name: 'Vue'}])

  // 对象
  const [person, setPerson] = useState({name: 'Jack', age: 18})

  return (
    <div>

      <div>{person.name}, {person.age}</div>
      <button onClick={() => setPerson({...person, name: 'Rose'})}>变人</button>
      <div>
        { books.map(book => <li key={book.id}>{book.name}</li>) }
      </div>
      <button onClick={() => setBooks([...books, {id: Math.random(), name: Math.random().toString(36).substr(2)}])}>添加</button>

      <div>{msg}</div>
      <button onClick={() => setMsg(msg+'World')}>修改</button>
      <br/>
      <button onClick={() => setCount(count + 1)}>按钮被点击了{count}次</button>

    </div>
  );
};

export default App;
